<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div#main{
            width: 100%;
            height: 600px;
            display: flex;
            flex-flow: row wrap;
            border: 0px solid #ccc;
        }
        div{
            width: 280px;
            height: 280px;
            border: 1px solid #ccc;
            margin: 0px auto;
        }

        #box1{
            background: url(http://img.simoniu.com/background_logo2.jpg) no-repeat 0px 0px;
        }

        #box2{
            background: url(http://img.simoniu.com/background_logo2.jpg) repeat 0px 0px;
        }

        #box3{
            background: url(http://img.simoniu.com/background_logo2.jpg) repeat-x 20px 20px;
        }

        #box4{
            background: url(http://img.simoniu.com/background_logo2.jpg) repeat-y 20px 20px;
        }

        #box5{
            background: #a8d3f8;
        }

        #box6{
            background: linear-gradient(to right, #0055ff, #b5b5f3);
        }
    </style>
</head>
<body>

<h1>css的背景</h1>
<hr>
<div id="main">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>

    <div id="box5"></div>
    <div id="box6"></div>
    <div id="box7"></div>
    <div id="box8"></div>
</div>
</body>
</html>